<template>
  <div class="order-container">
    <HHsearch
      ref="search"
      :btn-option="2"
      :search-options="searchOptions"
      @search="search"
      @reset="reset"
      @export="handleExport"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-data="tableData"
      :table-column="tableColumn"
      @page-click="pageClick"
    >
      <template #first="{ data }">
        <div class="flex-center">
          <span>{{ data.buyerName }}</span>
          <span>{{ data.buyerPhone }}</span>
        </div>
      </template>
    </HHtable>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import { getOrderList, exportOrder } from '@/api/order'
  import { splicingUrl } from '@/utils/validate'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        searchOptions: [
          {
            type: 'text',
            prop: 'buyerName',
            label: '买家名：',
            span: 6,
            placeholder: '请输入买家名称',
          },
          {
            type: 'text',
            prop: 'buyerPhone',
            label: '买家手机号：',
            span: 6,
            placeholder: '请输入买家手机号',
          },
          {
            type: 'text',
            prop: 'orderNumber',
            label: '订单号：',
            span: 6,
            placeholder: '请输入订单号',
          },
          {
            type: 'text',
            prop: 'spoorerName',
            label: '招顾名称：',
            span: 6,
            placeholder: '请输入招生顾问名称',
          },
          {
            type: 'daterange',
            prop: 'daterange',
            label: '订单时间：',
            span: 8,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            valueFormat: 'yyyy-MM-dd',
          },
        ],
        tableColumn: [
          {
            prop: 'orderNumber',
            label: '订单号',
            width: '200',
          },
          {
            prop: 'money',
            label: '单价',
            formatter: this.formatterPrice,
          },
          {
            label: '买家/手机号',
            slotContent: 'first',
          },
          {
            prop: 'createTime',
            label: '下单时间',
          },
          {
            prop: 'upOneLevelName',
            label: '上级分销员名称',
          },
          {
            prop: 'upOneLevelIntegral',
            label: '上一级分销员分佣',
          },
          {
            prop: 'twoLevelsUpName',
            label: '上两级分销员名称',
          },
          {
            prop: 'twoLevelsUpIntegral',
            label: '上两级分销员分佣',
          },
          {
            prop: 'spoorerName',
            label: '所属招顾',
          },
        ],
        tableData: [],
        total: 0,
        params: {
          pageNumber: 1,
          pageSize: 10,
          queryCriteria: {
            buyerName: '',
            buyerPhone: '',
            endTime: '',
            orderNumber: '',
            spoorerName: '',
            startTime: '',
          },
        },
      }
    },
    mounted() {
      this.getOrderList()
    },
    methods: {
      getOrderList() {
        this.$refs.table.loading = true
        getOrderList(this.params)
          .then((res) => {
            if (res.code === 200) {
              this.tableData = res.data.list
              this.total = res.data.total
              setTimeout(() => {
                this.$refs.table.loading = false
              }, 1000)
            }
          })
          .catch((error) => {
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          })
      },
      search(res) {
        if (res.daterange) {
          res.startTime = res.daterange[0]
          res.endTime = res.daterange[1]
          delete res.daterange
        }
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params.queryCriteria[arr[i]] = res[arr[i]]
        }
        this.getOrderList()
      },
      reset() {
        this.params = {
          pageNumber: 1,
          pageSize: 10,
          queryCriteria: {
            buyerName: '',
            buyerPhone: '',
            endTime: '',
            orderNumber: '',
            spoorerName: '',
            startTime: '',
          },
        }
        this.$refs.search.removeFilterArray()
        this.getOrderList()
      },
      handleExport(res) {
        if (res.daterange) {
          res.startTime = res.daterange[0]
          res.endTime = res.daterange[1]
          delete res.daterange
        }
        let url = splicingUrl(res)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = this.baseURL + '/order/export.do?' + url
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      pageClick(pager) {
        this.params.pageNumber = pager
        this.getOrderList()
      },
      formatterPayment(row, column, cellval, index) {
        if (cellval === 0) return '支付宝'
        else if (cellval === 1) return '微信支付'
        else return '现金'
      },
      formatterPrice(row, column, cellval, index) {
        return `￥${cellval}`
      },
    },
  }
</script>

<style lang="scss" scoped>
  .flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
